import React, { Component } from 'react'

import MyBtn from './MyBtn'

export default class MyPropsPlus extends Component {
  state = {
    count: 100,
    msg: '我不愿你一个人',
    word: '2023-3-10'
  }

  onClick = () => {
    this.red.style.color = 'red'
    this.orange.style.color = 'orange'
  }

  onchange = (e) => {
    this.setState({
      word: e.target.value
    })
  }

  changeCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  changeMsg = (msg) => {
    this.setState({
      msg
    })
  }


  changeChildNumber = () => {
    this.child.setState({
      number: this.child.state.number + 1
    })
  }


  // isShow = () => {
  //   this.child.changeFlag()
  // }

  isShow = () => {
    this.child.setState({
      flag: !this.child.state.flag
    })
  }

  render() {
    const { count, msg, word } = this.state
    return (
      <div>
        <h3>React 组件通信</h3>
        <h4 ref={el => this.red = el}>变红色</h4>
        <h4 ref={el => this.orange = el}>变橘色</h4>
        <MyBtn text='chenge Color' onClick={this.onClick}></MyBtn>
        <h4>count = {count}</h4>
        <h4>msg = {msg}</h4>
        <h4>word = {word}</h4>
        <div>
          <input type='text' value={word} onChange={this.onchange} />
        </div>
        <br />
        <MyBtn text='chenge Count' onClick={this.changeCount}></MyBtn>
        <br />
        <MyBtn text='chenge Msg' onClick={() => this.changeMsg('如果我们不曾相遇')}></MyBtn>
        <br />
        <MyBtn text='change child number' onClick={this.changeChildNumber}></MyBtn>
        <br />
        <MyBtn text='is Show' onClick={this.isShow}></MyBtn>
        <MyChild ref={el => this.child = el} count={count} msg={msg} word={word}></MyChild>
      </div>
    )
  }
}


class MyChild extends Component {
  state = {
    number: 1,
    flag: true
  }

  // changeFlag = () => {
  //   this.setState({
  //     flag: !this.state.flag
  //   })
  // }

  render() {
    const { count, msg, word } = this.props
    const { flag } = this.state
    return (
      flag ?
        <div>
          <h3>子组件</h3>
          <h4>count = {count}</h4>
          <h4>msg = {msg}</h4>
          <h4>word = {word}</h4>
          <h4>number = {this.state.number}</h4>
        </div>
        :
        <div>
          <h1>404</h1>
        </div>
    )
  }
}
